<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .disabled {
            /* 光标 */
            cursor: not-allowed;
        }
        .active {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <!-- <p>
                <span>1*3={{1*3}}</span>
                <span>2*3={{2*3}}</span>
                <span>3*3={{3*3}}</span>
            </p>
            <p>
                <span>1*4={{1*4}}</span>
                <span>2*4={{2*4}}</span>
                <span>3*4={{3*4}}</span>
                <span>4*4={{4*4}}</span>
            </p> -->
            <p v-for="j in 9">
                <span v-for="i in j"> {{i}}*{{j}}={{i*j}} </span>
            </p>
            <p>第{{currentPage}}页</p>
        </div>
        <!-- 第一页时禁用上一页 -->
        <button @click="prePage" :disabled="currentPage == 1" :class="{disabled:currentPage == 1}">上一页</button>
        <button v-for="num in totalPage" :key="num" @click="changePage(num)" :class="{active:currentPage==num}">
            {{num}}
        </button>
        <button @click="nextPage" :disabled="currentPage == 5" :class="{disabled:currentPage == 5}">下一页</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 总页码
                totalPage: 5,
                // 当前页码
                currentPage: 1
            },
            methods: {
                // 点击页码，修改数据而不是跳转页面。这样性能更好
                changePage(num) {
                    // console.log(num);
                    this.currentPage = num;
                },
                // 上一页
                prePage() {
                    this.currentPage > 1 ? this.currentPage -- : ''
                },
                // 下一页
                nextPage() {
                    this.currentPage < 5 ? this.currentPage ++ : ''
                }
            }
        })
    </script>
</body>
</html>